<template>
  <div class="cart-page">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />

    <div v-if="cartStore.items.length === 0" class="empty-cart">
      <van-icon name="shopping-cart-o" size="50" class="cart-icon" />
      <p class="empty-text">购物车空空如也</p>
      <van-button type="primary" round class="browse-btn" @click="$router.push('/')">
        去逛逛
      </van-button>
    </div>

    <div v-else>
      <div class="cart-list">
        <div class="cart-item" v-for="(item, index) in cartStore.items" :key="index">
          <van-checkbox :model-value="item.checked" @click.stop="cartStore.toggleCheck(index)" class="item-checkbox" />

          <div class="item-image">
            <img :src="item.picUrl || item.gallery[0]" />
          </div>

          <div class="item-info">
            <div class="item-name">{{ item.name }}</div>

            <div v-if="Object.keys(item.selectedSpecs).length > 0" class="item-specs">
              <span v-for="(value, key) in item.selectedSpecs" :key="key">
                {{ key }}: {{ value }}
              </span>
            </div>

            <div class="item-price">
              <span class="current-price">¥{{ cartStore.itemTotal(index).toFixed(2) }}</span>
              <span class="unit-price">¥{{ item.retailPrice.toFixed(2) }} × {{ item.quantity }}</span>
            </div>

            <div class="item-actions">
              <van-stepper v-model="item.quantity" theme="round" button-size="22" integer min="1"
                :max="item.stock || 99" @change="handleQuantityChange(index, $event)" class="quantity-stepper" />
              <van-button size="small" type="danger" plain @click="showDeleteConfirm(index)" class="delete-btn">
                删除
              </van-button>
            </div>
          </div>
        </div>
      </div>

      <div class="clear-cart">
        <van-button type="default" size="small" @click="showClearConfirm" class="clear-btn">
          <van-icon name="delete" />
          清空购物车
        </van-button>
      </div>

      <div class="checkout-container">
        <div class="select-all-container" @click="toggleAll">
          <van-checkbox :model-value="allChecked" checked-color="#ee0a24" />
          <span class="select-all-text">全选</span>
          <span class="checked-count">({{ cartStore.checkedItems.length }})</span>
        </div>

        <van-button type="warning" class="checkout-btn" :disabled="cartStore.checkedItems.length === 0"
          @click="handleCheckout">
          去结算 (¥{{ cartStore.totalPrice.toFixed(2) }})
        </van-button>
      </div>
    </div>

    <van-dialog v-model:show="showDeleteDialog" title="确认删除" show-cancel-button @confirm="confirmDelete"
      class="delete-dialog">
      <div class="dialog-content">
        <van-icon name="warning" class="dialog-icon" />
        <p class="dialog-message">确定要从购物车中删除此商品吗？</p>
        <p class="dialog-tip">删除后将无法恢复</p>
      </div>
    </van-dialog>
    <van-dialog v-model:show="showClearDialog" title="清空购物车" show-cancel-button @confirm="confirmClear"
      class="clear-dialog">
      <div class="dialog-content">
        <van-icon name="delete-o" class="dialog-icon" />
        <p class="dialog-message">确定要清空购物车中的所有商品吗？</p>
        <p class="dialog-tip">共 {{ cartStore.items.length }} 件商品将被删除</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cart'
import { showToast } from 'vant'
import 'vant/es/toast/style';

const router = useRouter()
const cartStore = useCartStore()

const showDeleteDialog = ref(false)
const showClearDialog = ref(false)
const deletingIndex = ref(null)

const allChecked = computed(() => cartStore.isAllChecked)

const toggleAll = () => {
  cartStore.toggleAll(!allChecked.value)
}

const handleQuantityChange = (index, newQuantity) => {
  cartStore.updateQuantity(index, newQuantity)
}

const showDeleteConfirm = (index) => {
  deletingIndex.value = index
  showDeleteDialog.value = true
}

const confirmDelete = () => {
  cartStore.removeItem(deletingIndex.value)
  showSuccessToast('删除成功')
}

const showClearConfirm = () => {
  showClearDialog.value = true
}

const confirmClear = () => {
  cartStore.clearCart()
  showSuccessToast('购物车已清空')
}

const handleCheckout = () => {
  router.push('/checkout')
}

const showSuccessToast = (message) => {
  showToast({
    message,
    icon: 'success',
    className: 'success-toast',
    duration: 1500,
    position: 'center'
  })
}
</script>

<style scoped>
.cart-page {
  min-width: 78vh;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 6.25rem;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
}

.cart-icon {
  color: #c8c9cc;
  margin-bottom: 0.9375rem;
  animation: bounce 1.5s infinite;
}

.empty-text {
  font-size: 1rem;
  color: #969799;
  margin: 0.625rem 0;
}

.browse-btn {
  width: 7.5rem;
  height: 2.5rem;
  margin-top: 1.25rem;
}

.cart-list {
  padding: 0.625rem;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 0.625rem;
  background: white;
  margin-bottom: 0.625rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.item-checkbox {
  margin-right: 0.75rem;
}

.item-image {
  width: 5rem;
  height: 5rem;
  margin-right: 0.625rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
  -webkit-line-clamp: 2;
}

.item-specs {
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.item-specs span {
  background: #f5f5f5;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  line-height: 1.4;
}

.item-price {
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.current-price {
  color: #ff2f55;
  font-size: 0.9375rem;
  font-weight: bold;
}

.unit-price {
  font-size: 0.75rem;
  color: #999;
}

.item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-stepper {
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.delete-btn {
  height: 1.75rem;
  padding: 0 0.75rem;
}

.clear-cart {
  padding: 0.625rem 0.9375rem;
  text-align: right;
}

.clear-btn {
  color: black;
  background-color: orange;
}

.checkout-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.125rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.9375rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.select-all-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.select-all-text {
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

.checked-count {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  color: #666;
}

.checkout-btn {
  height: 2.25rem;
  min-width: 7.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 1.375rem;
}

.dialog-content {
  padding: 1rem;
  text-align: center;
}

.dialog-icon {
  font-size: 1.5rem;
  color: #ff976a;
  margin-bottom: 0.625rem;
}

.dialog-message {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.3125rem;
}

.dialog-tip {
  font-size: 0.75rem;
  color: #969799;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.625rem);
  }
}

.van-button:active {
  transform: scale(0.98);
  opacity: 0.9;
}


@media (max-width: 320px) {
  :root {
    font-size: 14px;
  }
  
  .item-image {
    width: 4.375rem;
    height: 4.375rem;
  }
}

@media (min-width: 1000px) {
  .cart-page {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  :root {
    font-size: 16px;
  }
}

:deep(.van-toast--success) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-width: 70%;
}

:deep(.van-toast--success .van-icon) {
  color: white;
  font-size: 1.125rem;
  margin-right: 0.5rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

:deep(.van-toast--success .van-toast__text) {
  display: flex;
  align-items: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
</style>